<template>
  <div class="addArticle flex H100">
    <div class="w-200 flex2 p-r-10 H100">
      <el-button type="primary" class="W100" @click="save">保存文章</el-button>
        <div>
          <!-- 输入标题 ↓ -->
          <div>
              <h2 class="p-t-5 p-b-5 h-48 l-h-38 cursor-pointer">文章题目</h2>
              <input 
                class="h-50 W100 fz-16 p-l-5 p-r-5" 
                type="text" 
                placeholder="输入文章标题"
                minlength="1"
                maxlength="30"
                v-model="article.articleTitle">
          </div>
          <!-- 输入简介 -->
          <div>
              <h2 class="p-t-6 p-b-6 h-48 l-h-38 cursor-pointer">文章简介</h2>
              <textarea 
                class="W100 p-6" 
                rows="7" 
                v-model="article.articleDescription"
                placeholder="输入文章简介">
              </textarea>
          </div>
          <!-- 选择类型 -->
          <el-scrollbar>
            <div class="h-300">
                <h2 class="p-t-5 p-b-5 h-48 l-h-38 cursor-pointer" @click="articleTypeChooseIndex=null">类型选择</h2>
                <main class="t-color">
                  <ul>
                    <li 
                      v-for="(item, index) in articleTypesList" 
                      :key="index" 
                      class="h-30 l-h-30 p-l-5 p-r-5 item box-shadow-hover cursor-pointer"
                      :class="{active: articleTypeChooseIndex==index?true:false}"
                      @click="chooseType(index, item._id)">{{item.articleTypeName}}</li>
                  </ul>
                </main>
            </div>
          </el-scrollbar>
        </div>
       
    </div>
    <div class="w-831">
      <vue-editor 
        id="editor" 
        useCustomImageHandler
        @image-added="handleImageAdded" 
        v-model="article.articleContent"
        style="height: 93%;"></vue-editor>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  created() {
    this.getArticleTypesList()
  },
  data() {
    return {
      articleTypeChooseIndex: null,
      articleTypesList: [],
      article: {
        articleTitle: moment(new Date()).format('YYYY-MM-DD HH:MM:SS'),
        articleDescription:'',
        articleContent: '',
        articleAuthor: localStorage.username,
        articleType: '',
      }
    };
  },
  methods: {
    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      let formData = new FormData()
      formData.append("file", file)

      const res = await this.api.post("/admin/uploadArticleImage", formData)
      Editor.insertEmbed(cursorLocation, "image", res.data.address)
      resetUploader()
    },
    getArticleTypesList() {
      this.api.get('/admin/article/getArticleTypeList').then(res => {
        if(res.code == 0){
          this.articleTypesList = res.data
        }else {
          this.$message({ type: 'warning', message: res.message })
        }
      })
      .catch(err => {
        console.log(err)
      })
    },
    save() {
      if(this.article.articleType == '') this.$message({type: 'warning', message: '请选择文章类型'})
      else {
        this.$confirm('是否保存此文章?', '提示', {confirmButtonText: '保存',cancelButtonText: '取消',type: 'warning'})
        .then(async () => {
          const res = await this.api.post('/admin/article/addArticle', {...this.article})
          if(res.code == 0) {
            // 重置内容框
            this.article.articleTitle = moment(new Date()).format('YYYY-MM-DD HH:MM:SS')
            this.article.articleDescription = ''
            this.article.articleContent = ''
            this.article.articleType = ''
            this.articleTypeChooseIndex = null
            this.$message({type: 'success', message: res.message})
          }else {
            this.$message({type: 'warning', message: res.message})
          }
        }).catch(() => {
          this.$message({type: 'info',message: '已取消保存'})     
        })
      }
    },
    chooseType(index, id) {
      this.articleTypeChooseIndex = index
      this.article.articleType = id
    }
  }
};
</script>

<style lang="scss">
.addArticle {
  .active {
    border-left: 2px solid #fa6706;
    background: rgba(250, 103, 6, 0.3) !important;
  }
  .el-scrollbar {
    border: none;
  }
  .item {
    background: rgba(192, 196, 204, 0.3);
    margin-bottom: 2px;
  }
}
</style>